<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>在线办公系统</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


    <script>
    var emailC = false;
    var pwdC = false;
    var pwd2C = false;
    var checkBoxC = false;
    var codeC = false;
    var hasBindDoRegister = false;
    var emailCanReg = false;


    $(document).ready(function () {
        $("#showRegisterLink").click(function () {
            $("#loginDiv").hide(500);
            $("#registerDiv").show(500);
        });
        $("#showLoginLink").click(function () {
            $("#registerDiv").hide(500);
            $("#loginDiv").show(500);
        });
        $("#regEmailInput").bind("input propertychange",function () {
            //验证邮箱
            if (!$("#regEmailInput").val().match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                $("#regEmailLabel").html("&nbsp;&nbsp;&nbsp;邮箱格式不正确").css("color", "#D22215");
                emailC = false;
            } else {
                var regLink = $("<a style='text-decoration: none' href='javascript:void(0)' id='regSendEmailLink'>发送邮件</a>").bind("click",function () {
                    doSendEmail($(this));
                });
                $("#regEmailLabel").html("&nbsp;&nbsp;&nbsp;邮箱可用！").css("color", "#36D240").append(regLink);
                emailC = true;
            }
            checkCanReg();
        });
        $("#regPwdInput").bind("input propertychange",function () {
            var pwd = $("#regPwdInput").val();
            if (/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]*$/.test(pwd)) {
                $("#regPwdLabel").html("").css("color", "#36D240");
                var pwd1 = $("#regPwdInput").val();
                var pwd2 = $("#regPwd2Input").val();
                if(pwd1 != pwd2){
                    $("#regPwd2Label").html("&nbsp;&nbsp;&nbsp;两次密码输入不一致").css("color", "#D22215");
                    pwd2C = false;
                }else{
                    $("#regPwd2Label").html("").css("color", "#36D240");
                    pwd2C = true;
                }
                pwdC = true;
            }
            else {
                $("#regPwdLabel").html("&nbsp;&nbsp;&nbsp;必须由大、小写字母和数字三种组合").css("color", "#D22215");
                pwdC = false;
            }
            checkCanReg();
        });
        $("#regPwd2Input").bind("input propertychange",function () {
            var pwd1 = $("#regPwdInput").val();
            var pwd2 = $("#regPwd2Input").val();
            if(pwd1 != pwd2){
                $("#regPwd2Label").html("&nbsp;&nbsp;&nbsp;两次密码输入不一致").css("color", "#D22215");
                pwd2C = false;
            }else{
                $("#regPwd2Label").html("").css("color", "#36D240");
                pwd2C = true;
            }
            checkCanReg();
        });
        $("#regCheckBoxLabel").click(function () {
            $("#regCheckBoxInput").click();
        });
        $("#regCheckBoxInput").bind("input propertychange",function () {
            if($("#regCheckBoxInput").get(0).checked){
                checkBoxC = true;
            }else{
                checkBoxC = false;
            }
            checkCanReg();
        });
        $("#regCodeInput").bind("input propertychange",function () {
            if($("#regCodeInput").val() === ""){
                codeC = false;
            }else{
                codeC = true;
            }
            checkCanReg();
        });
        function getCookie(name){
            var strcookie = document.cookie;//获取cookie字符串
            var arrcookie = strcookie.split("; ");//分割
            for ( var i = 0; i < arrcookie.length; i++) {
                var arr = arrcookie[i].split("=");
                if (arr[0] === name){
                    return arr[1];
                }
            }
            return "";
        }
        function doRegister() {
            var data ={
                "mail":$("#regEmailInput").val(),
                "pwd":$("#regPwdInput").val(),
                "code":$("#regCodeInput").val()
            };
            $.ajax({
                url:"/reg",
                type:"post",
                data:JSON.stringify(data),
                dataType:"json",
                async:true,
                contentType:"application/json;charset=utf-8",
                success:function (res) {
                    if (res.state === "ok") {
                        $("#registerDiv").hide(500);
                        $("#regSuccEmail").html(res.data.email);
                        $("#registerSuccDiv").show(500);
                    }else if(res.state==="failed"&&res.msg==="激活码不正确!"){
                        $("#regCodeLabel").html("激活码不正确").css("color", "#D22215").bind("input propertychange",function () {
                            $(this).html("");
                        });

                    }
                }
            });
        }
        function doSendEmail(e) {
            $.ajax({
                url:"/sendEmail",
                type:"get",
                data:{
                    mail:$("#regEmailInput").val()
                },
                async:true,
                success:function (res) {
                    if (res.state === "ok") {
                        e.html("发送成功").css("color","#36D240").removeAttr("href").unbind("click");
                        emailCanReg = true;
                    }else if(res.state==="failed"&&res.msg==="邮箱已注册"){
                        e.html("邮箱已注册").css("color","#D22215").removeAttr("href").unbind("click");
                        emailCanReg = false;
                    }
                    checkCanReg();
                }
            });
        }
        function doLogin() {
            var data = {
                "email":$("#loginEmailInput").val(),
                "pwd":$("#loginPwdInput").val()
            };
            $.ajax({
                url:"/login",
                type:"post",
                data:JSON.stringify(data),
                async:true,
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                success:function (res) {
                    if (res.state === "ok") {
                        $("#loginDiv").hide(500);
                        $("#loginSuccEmail").html(res.data.email);
                        $("#loginSuccDiv").show(500);
                        setTimeout(function () {
                            window.location.href = "/"
                        },1500)
                    }else if(res.state==="failed"&&res.msg==="邮箱不存在"){
                        $("#loginEmailLabel").html(res.msg).css("color", "#D22215");
                        $("#loginPwdLabel").html("");
                    }else if(res.state==="failed"&&res.msg==="密码错误"){
                        $("#loginPwdLabel").html(res.msg).css("color", "#D22215");
                    }
                }
            });
        }
        function checkCanReg(){
            if (emailC && pwd2C && pwdC && checkBoxC&&codeC) {
                var ele = $("#regBtn").removeClass("btn-secondary").addClass("btn-success");
                if (!hasBindDoRegister) {
                    ele.bind("click",function () {
                        doRegister();
                        hasBindDoRegister = true;
                    });
                }
                return true;
            }else{
                $("#regBtn").addClass("btn-secondary").removeClass("btn-success").unbind("click");
                return false;
            }
        }
        $("#loginBtn").bind("click",function () {
            doLogin();
        });
    })
</script>
</head>
<body>
    <div class="card content" id="loginDiv">
        <div class="card-body">
            <h2 class="card-title">登录 Login</h2>
            <form>
                <div class="form-group">
                    <label for="loginEmailInput">邮箱</label>
                    <input type="email" class="form-control" id="loginEmailInput" aria-describedby="emailHelp"
                           placeholder="请输入邮箱">
                    <small class="form-text" id="loginEmailLabel"></small>
                </div>
                <div class="form-group">
                    <label for="loginPwdInput">密码</label>
                    <input type="password" class="form-control" id="loginPwdInput" placeholder="请输入密码">
                    <small  class="form-text" id="loginPwdLabel"></small>
                </div>
                <div class="form-check">
                    <!--<input type="checkbox" class="form-check-input" id="exampleCheck1">-->
                    <!--<label class="form-check-label" for="exampleCheck1">记住账号</label>-->
                    <a href="javascript:void(0)" style="float: right;text-decoration: none;" id="showRegisterLink">还没有账号？点击注册</a>
                </div>
                <div class="row col-md-12">
                    <button type="button" class="btn btn-info col-md-3 pull-right" style="margin-top: 20px;" id="loginBtn">登录</button>
                </div>

            </form>
        </div>
    </div>
    <div class="card content" id="registerDiv" style="display: none;">
        <div class="card-body">
            <h2 class="card-title">注册 Register</h2>
            <form>
                <div class="form-group">
                    <label for="regEmailInput">邮箱</label>
                    <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="请输入邮箱"
                           id="regEmailInput">
                    <small class="form-text" id="regEmailLabel"></small>
                </div>
                <div class="form-group">
                    <label for="regPwdInput">密码</label>
                    <input type="password" class="form-control" placeholder="请输入密码" id="regPwdInput">
                    <small class="form-text" id="regPwdLabel"></small>
                </div>
                <div class="form-group">
                    <label for="regPwd2Input">再次输入密码</label>
                    <input type="password" class="form-control" placeholder="再次输入密码" id="regPwd2Input">
                    <small class="form-text" id="regPwd2Label"></small>
                </div>
                <div class="form-group">
                    <label for="regCodeInput">激活码</label>
                    <input type="password" class="form-control" placeholder="输入激活码" id="regCodeInput">
                    <small class="form-text" id="regCodeLabel"></small>
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="regCheckBoxInput">
                    <label class="form-check-label" for="exampleCheck1" id="regCheckBoxLabel">我已同意TODO注册条款</label>
                    <a href="javascript:void(0)" style="float: right;text-decoration: none;" id="showLoginLink">已有账号？去登录</a>
                </div>
                <div class="row col-md-12">
                    <button type="button" class="btn btn-secondary col-md-3" style="margin-top: 20px;" id="regBtn">注册
                    </button>
                </div>

            </form>
        </div>
    </div>
    <div class="card content" id="registerSuccDiv" style="display: none;">
        <div class="card-body">
            <h2 class="card-title">注册结果 Success</h2>
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading" style="margin-top: 20px">恭喜您,注册账号成功!</h4>
                <p style="line-height: 30px;margin-top: 20px;">您的邮箱&nbsp;&nbsp;<span id="regSuccEmail" style="color: darkorange;font-size: 25px;">4801938409</span>&nbsp;&nbsp;已成功开通账号，欢迎使用TODO服务，现在您可以有序的计划每一天！</p>
                <hr>
                <p class="mb-0"><a href="http://www.baidu.com">正在跳转至首页,如果长时间未进入,请点击进入首页</a></p>
            </div>
        </div>
    </div>

    <div class="card content" id="loginSuccDiv" style="display: none;">
        <div class="card-body">
            <h2 class="card-title">登录结果</h2>
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading" style="margin-top: 20px">登录成功</h4>
                <p>欢迎您：<span id="loginSuccEmail" style="color: darkorange;font-size: 25px;"></span></p>
                <hr>
                <p class="mb-0"><a href="/">正在跳转至首页,如果长时间未进入,请点击进入首页</a></p>
            </div>
        </div>
    </div>
</body>
</html>